<template>
    <!--产品块-->
    <div class="ce_product">
        <div class="container">
            <!-- 导航标题:
             mobileScrollPlugin：用户视口滑动区
             nav-tabs：导航总长度width计算得出-->
            <div class="mobileScrollPlugin">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <!--a标签对应页面内容(锚链接)#id=tab-content-->
                        <a href="#product1" aria-controls="product1" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_OVER_BALANCE.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product2" aria-controls="product2" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_HOT.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product3" aria-controls="product3" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_HY.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product4" aria-controls="product4" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_GENERAL_MERCHANDISE.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product5" aria-controls="product5" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_HOME_APPLIANCE.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product6" aria-controls="product6" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_VEGETABLE.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product7" aria-controls="product7" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_CAR_HOUSE.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product8" aria-controls="product8" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_MEDICAL_TREATMENT.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product9" aria-controls="product9" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_CLOTHING.value}}</a>
                    </li>
                    <li role="presentation">
                        <a href="#product10" aria-controls="product10" role="tab" data-toggle="tab">{{PRODUCT_TYPE.PRODUCT_SKIN_CARE.value}}</a>
                    </li>
                </ul>
            </div>

            <!-- 标签页内容 -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="product1">
                    <div class="container">
                        <div class="col-xs-12 col-sm-6 col-md-4" @click="toDesc1">
                            <!--添加选中样式-->
                            <div class="ce_product_box active">
                                <div class="ce_product_box_left">
                                    <p>超值会员卡</p>
                                    <div class="row">

                                        <div class="descSpan col-xs-6" >
                                            <p>{{desc11.title}}</p>
                                            <p>{{desc11.desc}}</p>
                                        </div>

                                        <div class="descSpan col-xs-6">
                                            <p>{{desc12.title}}</p>
                                            <p>{{desc12.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc13.title}}</p>
                                            <p>{{desc13.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc14.title}}</p>
                                            <p>{{desc14.desc}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ce_product_box_right">
                                    <div class="ce_box_tip" data-toggle="tooltip" data-placement="top"
                                         title="亚盟会员·超值推荐·最高七折·购物100%返红包">
                                        <!--当前工具提示=tooltip
                                         data-placement：提示出现位置
                                         title：提示内容
                                         -->
                                        <span v-for="(item,index) in desc16" :key="index">{{item}}</span>
                                    </div>
                                    <b>{{desc15.desc}}</b>
                                    <sub>￥</sub>
                                    <p>{{desc15.title}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4" @click="toDesc2">
                            <div class="ce_product_box ">
                                <div class="ce_product_box_left">
                                    <p>超值会员卡</p>
                                    <div class="row">
                                        <div class="descSpan col-xs-6" >
                                            <p>{{desc21.title}}</p>
                                            <p>{{desc21.desc}}</p>
                                        </div>

                                        <div class="descSpan col-xs-6">
                                            <p>{{desc22.title}}</p>
                                            <p>{{desc22.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc23.title}}</p>
                                            <p>{{desc23.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc24.title}}</p>
                                            <p>{{desc24.desc}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ce_product_box_right">
                                    <div class="ce_box_tip" data-toggle="tooltip" data-placement="top"
                                         title="亚盟会员·超值推荐·最高七折·购物100%返红包">
                                        <!--当前工具提示=tooltip
                                         data-placement：提示出现位置
                                         title：提示内容
                                         -->
                                        <span v-for="(item,index) in desc26" :key="index">{{item}}</span>
                                    </div>
                                    <b>{{desc25.desc}}</b>
                                    <sub>￥</sub>
                                    <p>{{desc25.title}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4" @click="toDesc3">
                            <div class="ce_product_box">
                                <div class="ce_product_box_left">
                                    <p>超值会员卡</p>
                                    <div class="row">
                                        <div class="descSpan col-xs-6" >
                                            <p>{{desc31.title}}</p>
                                            <p>{{desc31.desc}}</p>
                                        </div>

                                        <div class="descSpan col-xs-6">
                                            <p>{{desc32.title}}</p>
                                            <p>{{desc32.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc33.title}}</p>
                                            <p>{{desc33.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc34.title}}</p>
                                            <p>{{desc34.desc}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ce_product_box_right">
                                    <div class="ce_box_tip" data-toggle="tooltip" data-placement="top"
                                         title="亚盟会员·超值推荐·最高七折·购物100%返红包">
                                        <!--当前工具提示=tooltip
                                         data-placement：提示出现位置
                                         title：提示内容
                                         -->
                                        <span v-for="(item,index) in desc36" :key="index">{{item}}</span>
                                    </div>
                                    <b>{{desc35.desc}}</b>
                                    <sub>￥</sub>
                                    <p>{{desc35.title}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-4" @click="toDesc4">
                            <div class="ce_product_box">
                                <div class="ce_product_box_left">
                                    <p>超值会员卡</p>
                                    <div class="row">
                                        <div class="descSpan col-xs-6" >
                                            <p>{{desc41.title}}</p>
                                            <p>{{desc41.desc}}</p>
                                        </div>

                                        <div class="descSpan col-xs-6">
                                            <p>{{desc42.title}}</p>
                                            <p>{{desc42.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc43.title}}</p>
                                            <p>{{desc43.desc}}</p>
                                        </div>
                                        <div class="descSpan col-xs-6">
                                            <p>{{desc44.title}}</p>
                                            <p>{{desc44.desc}}</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="ce_product_box_right">
                                    <div class="ce_box_tip" data-toggle="tooltip" data-placement="top"
                                         title="亚盟会员·超值推荐·最高七折·购物100%返红包">
                                        <!--当前工具提示=tooltip
                                         data-placement：提示出现位置
                                         title：提示内容
                                         -->
                                        <span v-for="(item,index) in desc46" :key="index">{{item}}</span>
                                    </div>
                                    <b>{{desc45.desc}}</b>
                                    <sub>￥</sub>
                                    <p>{{desc45.title}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane" id="product2">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proHot" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product3">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proHY" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product4">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proGeneral" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product5">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proHomeAppliance" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product6">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proVegetables" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product7">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proCarHouse" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product8">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proMedical" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product9">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proClothing" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
                <div role="tabpanel" class="tab-pane" id="product10">
                    <el-col class="pro_card body-col" :xs="12" :sm="12" :md="6" :lg="6" v-for="(item,index) in proSkin" :key="index" >
                        <el-card class="col-card" :body-style="{ padding: '10px'}" shadow="hover" >
                            <img v-if="!item.picList" src="../../../public/base/imgs/product/BG-wine-1.jpg" class="image">
                            <img v-if="item.picList" :src="item.picList[0]" class="image">
                            <div style="padding: 14px;">
                                <span>{{item.name}}</span>
                                <div class="bottom clearfix">
                                    <time class="time">{{item.seoDescription}}</time>
                                </div>
                            </div>
                            <el-button type="text" class="pro_card_to button" @click="inDetail(item)">查看详情</el-button>
                        </el-card>
                    </el-col>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "MainProduct",
        data() {
            return {
                message: '首页产品展示标签',
                products: [],
                PRODUCT_TYPE: PRODUCT_TYPE,
                //本地存储变量
                privilegeDesc1: {},
                desc11: {},
                desc12: {},
                desc13: {},
                desc14: {},
                desc15: {},
                desc16: [],
                privilegeDesc2: {},
                desc21: {},
                desc22: {},
                desc23: {},
                desc24: {},
                desc25: {},
                desc26: [],
                privilegeDesc3: {},
                desc31: {},
                desc32: {},
                desc33: {},
                desc34: {},
                desc35: {},
                desc36: [],
                privilegeDesc4: {},
                desc41: {},
                desc42: {},
                desc43: {},
                desc44: {},
                desc45: {},
                desc46: [],

                proHot: [],
                proHY: [],
                proGeneral: [],
                proHomeAppliance: [],
                proVegetables: [],
                proCarHouse: [],
                proMedical: [],
                proClothing: [],
                proSkin: []
            }
        },
        mounted() {
            //初始化bootstrap工具提示
            $(function () {
                $("[data-toggle='tooltip']").tooltip();
            })
            //获取productNav宽度
            this.computeProductNav();
            this.getWidth();
            this.getIndexProduct();
            this.addActive();
        },
        watch: {},
        methods: {
            //添加active
            addActive(){
                let productBox=document.getElementsByClassName("ce_product_box");
                for (let i=0;i<productBox.length;i++){
                    Tool.removeClass(productBox[i],"active");
                    Tool.addClass(productBox[0],"active");
                    productBox[i].onmouseover=function () {
                        Tool.addClass(productBox[i],"active");
                    }
                    productBox[i].onmouseout=function () {
                        Tool.removeClass(productBox[i],"active");
                        Tool.addClass(productBox[0],"active")
                    }
                }
            },
            //计算产品nav的初始化宽度
            computeProductNav() {
                let productNav = $(".ce_product .nav-tabs");
                let productNavLis = productNav.find("li");
                let totalWidth = 0;
                //遍历lis
                productNavLis.each(function (index, value) {
                    /**
                     * width: 88元素本身宽度，不包含padding和间距
                     * innerWidth：88元素本身宽度+padding值
                     * outerWidth：88元素本身宽度+padding值+border值
                     * outerWidth(true)：参数=true，88元素本身宽度+padding值+border值+margin值
                     */
                    totalWidth = totalWidth + $(value).innerWidth();
                });
                productNav.width(totalWidth);
                //使用iscroll插件，移动端滑动
                let iscroll = new IScroll('.mobileScrollPlugin', {
                    //水平滑动参数
                    scrollX: true,
                    scrollY: false
                });
            },
            //获取视口
            getWidth() {
                let ps = document.querySelectorAll(".ce_product_box .ce_product_box_left");
                $(window).on("resize", function () {
                    let width = $(window).width();
                    if (width < 768) {
                        for (let i = 0; i < ps.length; i++) {
                            ps.style = "color:red";
                        }
                    }

                }).trigger("resize");
            },
            //获取首页产品数据
            getIndexProduct() {
                let loading = this.openLoading();
                this.$axios.get(process.env.VUE_APP_SERVER + '/business/client/product/list/index').then((response) => {
                    setTimeout(function () {
                        loading.close();
                    }, 300);
                    let resp = response.data;
                    if (resp.success) {
                        this.products = resp.responseData;
                        for (let i = 0; i < this.products.length; i++) {
                            if (this.products[i].typeId === 10) {
                                if (this.products[i].price > 6000) {
                                    this.privilegeDesc1 = this.products[i];
                                } else if (this.products[i].price > 2000) {
                                    this.privilegeDesc2 = this.products[i];
                                } else if (this.products[i].price > 1000) {
                                    this.privilegeDesc3 = this.products[i];
                                } else if (this.products[i].price > 100) {
                                    this.privilegeDesc4 = this.products[i];
                                }
                            } else if (this.products[i].typeId === 11) {
                                this.proHot.push(this.products[i]);
                            } else if (this.products[i].typeId === 12) {
                                this.proHY.push(this.products[i]);
                            } else if (this.products[i].typeId === 13) {
                                this.proGeneral.push(this.products[i]);
                            } else if (this.products[i].typeId === 14) {
                                this.proHomeAppliance.push(this.products[i]);
                            } else if (this.products[i].typeId === 15) {
                                this.proVegetables.push(this.products[i]);
                            } else if (this.products[i].typeId === 16) {
                                this.proCarHouse.push(this.products[i]);
                            } else if (this.products[i].typeId === 17) {
                                this.proMedical.push(this.products[i]);
                            } else if (this.products[i].typeId === 18) {
                                this.proClothing.push(this.products[i]);
                            } else {
                                this.proSkin.push(this.products[i]);
                            }
                        }

                        for (let i = 0; i < this.privilegeDesc1.productPrivilegeDescDtos.length; i++) {
                            this.desc11 = this.privilegeDesc1.productPrivilegeDescDtos[0];
                            this.desc12 = this.privilegeDesc1.productPrivilegeDescDtos[1];
                            this.desc13 = this.privilegeDesc1.productPrivilegeDescDtos[2];
                            this.desc14 = this.privilegeDesc1.productPrivilegeDescDtos[3];
                            this.desc15 = this.privilegeDesc1.productPrivilegeDescDtos[4];
                        }
                        for (let i = 0; i < this.desc15.tag.length; i++) {
                            this.desc16.push(this.desc15.tag.charAt(i));
                        }

                        for (let i = 0; i < this.privilegeDesc2.productPrivilegeDescDtos.length; i++) {
                            this.desc21 = this.privilegeDesc2.productPrivilegeDescDtos[0];
                            this.desc22 = this.privilegeDesc2.productPrivilegeDescDtos[1];
                            this.desc23 = this.privilegeDesc2.productPrivilegeDescDtos[2];
                            this.desc24 = this.privilegeDesc2.productPrivilegeDescDtos[3];
                            this.desc25 = this.privilegeDesc2.productPrivilegeDescDtos[4];
                        }
                        for (let i = 0; i < this.desc25.tag.length; i++) {
                            this.desc26.push(this.desc25.tag.charAt(i));
                        }

                        for (let i = 0; i < this.privilegeDesc3.productPrivilegeDescDtos.length; i++) {
                            this.desc31 = this.privilegeDesc3.productPrivilegeDescDtos[0];
                            this.desc32 = this.privilegeDesc3.productPrivilegeDescDtos[1];
                            this.desc33 = this.privilegeDesc3.productPrivilegeDescDtos[2];
                            this.desc34 = this.privilegeDesc3.productPrivilegeDescDtos[3];
                            this.desc35 = this.privilegeDesc3.productPrivilegeDescDtos[4];
                        }
                        for (let i = 0; i < this.desc35.tag.length; i++) {
                            this.desc36.push(this.desc35.tag.charAt(i));
                        }

                        for (let i = 0; i < this.privilegeDesc4.productPrivilegeDescDtos.length; i++) {
                            this.desc41 = this.privilegeDesc4.productPrivilegeDescDtos[0];
                            this.desc42 = this.privilegeDesc4.productPrivilegeDescDtos[1];
                            this.desc43 = this.privilegeDesc4.productPrivilegeDescDtos[2];
                            this.desc44 = this.privilegeDesc4.productPrivilegeDescDtos[3];
                            this.desc45 = this.privilegeDesc4.productPrivilegeDescDtos[4];
                        }
                        for (let i = 0; i < this.desc45.tag.length; i++) {
                            this.desc46.push(this.desc45.tag.charAt(i));
                        }
                    }
                });
            },
            toDesc1(){
                Tool.toLink(this.privilegeDesc1.path);
            },
            toDesc2(){
                Tool.toLink(this.privilegeDesc2.path);
            },
            toDesc3(){
                Tool.toLink(this.privilegeDesc3.path);
            },
            toDesc4(){
                Tool.toLink(this.privilegeDesc4.path);
            },
            //进入产品详情
            inDetail(item){
                if(Tool.isEmpty(item.path)){
                    this.$message({
                        showClose:true,
                        message:"当前产品未添加微信跳转URL，请联系后台人员",
                        type:'warning'
                    });
                }else{
                    Tool.toLink(item.path);
                }
            },
        },
    }
</script>

<style scoped>
    /*产品模块首页样式*/
    .ce_product {
        clear: both; /*clear取消默认继承上一级标签属性*/
        background-color: #eee;
        padding: 20px;
    }

    /*移动端scroll包裹器*/
    .ce_product .mobileScrollPlugin {
        width: 100%;
        overflow: hidden; /*超出部分隐藏*/
    }

    /*利用子元素撑开nav*/
    .nav-tabs li {
        margin-bottom: 0;
        /*padding: 0 8px;*/
    }

    .nav-tabs li a {
        line-height: 50px;
        text-decoration: none;
        border: none;
        color: #777;
        border-radius: 0;
        background-color: transparent; /*透明*/
    }

    .nav-tabs li a:hover {
        color: #1d7dd6;
        border-bottom: 3px solid #e92322;
    }

    .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
        border: none;
        color: #1d7dd6;
        background-color: transparent;
        border-bottom: 3px solid #e92322;
    }

    /*产品箱子*/
    .ce_product_box {
        height: 160px;
        margin-top: 20px; /*关联子元素的定位*/
        background-color: #fff;
        cursor: pointer;
    }
    .ce_product_box:hover,.ce_product_box:focus{
        box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    }

    /*设置box active样式*/
    .ce_product_box.active {
        background-color: #e92322;
        color: #fff;
    }

    .ce_product_box.active .ce_product_box_right > b, .ce_product_box.active .ce_product_box_right > sub, .ce_product_box.active .ce_product_box_right > p {
        color: #fff;
    }

    .ce_product_box.active .ce_product_box_right .ce_box_tip > span:nth-of-type(1) {
        color: #f8e42b;
        border: 1px solid #f8e42b;
        border-radius: 3px;
    }

    .ce_product_box.active .ce_product_box_right .ce_box_tip > span:nth-of-type(2) {
        color: #f8e42b;
        border: 1px solid #f8e42b;
        border-radius: 3px;
    }

    .ce_product_box.active .ce_product_box_right .ce_box_tip > span:nth-of-type(3) {
        color: #f8e42b;
        border: 1px solid #f8e42b;
        border-radius: 3px;
    }

    .ce_product_box.active .ce_product_box_right .ce_box_tip > span:nth-of-type(4) {
        color: #f8e42b;
        border: 1px solid #f8e42b;
        border-radius: 3px;
    }

    /*伪元素添加左上角标记，必须指定图标，字体，大小*/
    .ce_product_box.active .ce_product_box_left {
        position: relative;
        color: #fff;
    }

    .ce_product_box.active .ce_product_box_left::before {
        content: "\e915";
        font-family: "ce";
        position: absolute;
        left: 0;
        top: -6px;
        font-size: 25px;
    }

    /*右侧栏样式*/
    .ce_product_box .ce_product_box_right {
        width: 110px;
        height: 160px;
        /*定位上移和圆点*/
        position: absolute;
        right: 10px;
        top: 20px;
        /*左侧定位虚线*/
        border-left: 1px dashed #ccc;
        /*文字*/
        text-align: center;
        padding-top: 40px;
    }

    .ce_product_box .ce_product_box_right b {
        font-size: 30px;
        color: #e92322;
    }

    .ce_product_box .ce_product_box_right sub {
        bottom: 0;
        color: #e92322;
    }

    .ce_product_box .ce_product_box_right p {
        font-size: 18px;
        font-weight: bolder;
    }

    /*圆点
    :before/after 在每个 <p> 元素的内容之前插入新内容
    */
    .ce_product_box .ce_product_box_right::before, .ce_product_box .ce_product_box_right::after {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #eee;
        position: absolute;
        left: -5px;
    }

    .ce_product_box .ce_product_box_right::before {
        top: -5px; /*顶部对齐*/
        box-shadow: 0 -1px 1px #ddd inset; /*阴影：水平偏移 垂直偏移-1 大小 颜色 内阴影inset*/
    }

    .ce_product_box .ce_product_box_right::after {
        bottom: -5px; /*底部对齐*/
        box-shadow: 0 1px 1px #ddd inset;
    }

    /*顶部tip标签*/
    .ce_product_box .ce_product_box_right .ce_box_tip {
        position: absolute; /*在当前div中绝对定位，不影响其他元素位置*/
        left: 50%;
        top: 20px;
        transform: translateX(-50%); /*水平居中*/
        display: inline-block;
        width: 100%; /*提示框宽度*/
    }

    .ce_product_box .ce_product_box_right .ce_box_tip > span {
        cursor: pointer;
        margin-right: 2px;
    }

    .ce_product_box .ce_product_box_right .ce_box_tip > span:nth-of-type(1) {
        color: #ad7f0b;
        border: 1px solid #ad7f0b;
        border-radius: 3px;
    }

    .ce_product_box .ce_product_box_right .ce_box_tip > span:nth-of-type(2) {
        border-radius: 3px;
        color: #ad7f0b;
        border: 1px solid #ad7f0b;
    }

    .ce_product_box .ce_product_box_right .ce_box_tip > span:nth-of-type(3) {
        border-radius: 3px;
        color: #ad7f0b;
        border: 1px solid #ad7f0b;
    }

    .ce_product_box .ce_product_box_right .ce_box_tip > span:nth-of-type(4) {
        border-radius: 3px;
        color: #ad7f0b;
        border: 1px solid #ad7f0b;
    }

    /*左侧栏样式，指定样式，加> 精确到元素*/
    .ce_product_box .ce_product_box_left {
        margin-right: 100px; /*右侧回缩*/
        height: 160px;
        padding-top: 10px;
        font-size: 13px;
    }

    .ce_product_box .ce_product_box_left > p {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .ce_product_box .ce_product_box_left .row {
        margin-right: 0px;
        margin-left: 0px;
    }

    /*左：1-3 右2-4(even偶数)*/
    .ce_product_box .ce_product_box_left .row div:nth-of-type(even) {
        text-align: right;
    }

    .ce_product_box .ce_product_box_left .row div:nth-of-type(odd) {
        text-align: left;

    }

    /*产品card*/
    .descSpan {
        padding-right: 15px;
        padding-left: 5px;
    }

    /*商品卡片*/
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    /deep/ .el-card{
        margin-top: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    .tab-content{
        margin-left: 10px;
    }
    .pro_card_to{
        cursor: pointer;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 10px;
        color: #ffffff;
        background-color:#e92322;

        text-align: center;
        line-height: 20px;
        font-size: 16px;
    }
    .pro_card_to:hover,.pro_card_to:focus{
        background-color: rgba(159,2,1,1);
    }
</style>